<template>
  <div class="friendMapContainer">
      <!-- 顶部返回标题 -->
      <div class="top">
          <div class="left" @touchend="$router.back()">
              <yd-icon name="back" slot="icon" custom  size=".3rem" color="#FFffff"></yd-icon>
          </div>
          <div class="mid">
              {{group.name}}
          </div>
      </div>
      <!-- 地图 -->
  <baidu-map class="map" :theme="theme" @ready="mapReady" :scroll-wheel-zoom="true">
      <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
      <!-- 遮盖物 -->
      <div v-for="(item,index) in mapdata" :key="index">
        <friend :position="{lng:item.lng,lat:item.lat}" :detail="item" :index="index" @revindex="revindex"></friend>
      </div>
  </baidu-map>
      <!-- 上方弹起框 -->
      <transition name="fade">
          <div class="model" v-if="modelShow">
              <div class="speak">
                  <yd-icon name="sound" class="laba"  custom slot="icon" size=".45rem" color='#bcfc6a'></yd-icon>
                  <ul :style="{position:'absolute',left:'.9rem',top:'.36rem'}"  >
                      <li :style="{float:'left',backgroundColor:'#bcfc6a',margin:'0 .08rem',width:'.06rem',height:'.25rem'}"></li>
                      <li :style="{float:'left',backgroundColor:'#bcfc6a',margin:'.05rem .08rem 0',width:'.06rem',height:'.2rem'}" v-for="(n,index) in 6" :key="index"></li>
                  </ul>
                  <div>
                  </div>
                  <img :src="mapdata[modelNum].user.photo" >
                  <p> - - {{mapdata[modelNum].user.name}} - - </p>
              </div>
          </div>
      </transition>  
    <!-- 右侧列表 -->
    <transition name="fade">
      <div class="btn"  v-show="showMenu" @click="showMenu=false">
        <yd-icon name="drop"  custom slot="icon" size=".3rem" color='#ffffff'></yd-icon>
      </div>
    </transition>
    <transition name="fade">
      <ul class="menu" v-show="!showMenu" >
        <li v-for="(menu,index) of menuDetail" :key="index">
          <yd-icon :name="menu.name"  custom slot="icon" size=".4rem" color='#ffffff'></yd-icon>
        </li>
        <li @click="showMenu=true" style="margin-top:1px"><yd-icon name="up"  custom slot="icon" size=".3rem" color='#ffffff'></yd-icon> </li>
      </ul>
    </transition>            
          <!-- 下方对讲功能 -->
    <div class="btmSpeak">
          <ul>
              <li @click="uList">
                  <yd-icon name="information"  custom slot="icon" size=".4rem" color='#ffffff' style="position:absolute;z-index:1"></yd-icon>
              </li>
              <li>
                  <yd-icon name="speak"  custom slot="icon" size=".78rem" color='#f47d43' style="position:absolute;z-index:1"></yd-icon>
              </li>
              <li @click="msg">
                  <yd-icon name="write"  custom slot="icon" size=".4rem" color='#ffffff' style="position:absolute;z-index:1"></yd-icon>
              </li>
      </ul>
    </div>
  </div>
</template>
<script>
import friend from '@/components/map/friendOverflow'
export default {
  data(){
      return{
        theme:[//地图主题
          {
            "featureType": "all",
            "elementType": "all",
            "stylers": {"weight": "0.8","lightness": 38,"saturation": -44}
          }
        ],
        menuDetail:[//下拉菜单
          {"name":"friends"},
          {"name":"poisition"},
          {"name":"gai"},
          {"name":"car"},
          {"name":"doctor"},
          {"name":"house"},
        ],
        modelShow:false,//语音弹出框
        modelNum:0,//保存当前语音框下标
        showMenu:false,//右侧列表展开否
      }
  },
  components:{
      friend
  },
  computed:{
      group(){//被点击分组数据
          return this.$store.state.choseGroup
      },
      mapdata(){//地图数据
          return this.$store.state.mapdata.data
      }
  },
  methods:{
    mapReady({BMap, map}){//地图原生事件
            let that=this;  //保存this指向
            let mapPoints=that.mapdata;
            // console.log(mapPoints)
            function setZoom(points){//根据坐标计算地图级别
              if(points.length>0){
                var maxLng = points[0].lng;
                var minLng = points[0].lng;
                var maxLat = points[0].lat;
                var minLat = points[0].lat;
                for (var i = points.length - 1; i >= 0; i--) {
                  var res = points[i];
                  if(res.lng > maxLng) maxLng =res.lng;
                  if(res.lng < minLng) minLng =res.lng;
                  if(res.lat > maxLat) maxLat =res.lat;
                  if(res.lat < minLat) minLat =res.lat;
                };
                var cenLng =(parseFloat(maxLng)+parseFloat(minLng))/2;
                var cenLat = (parseFloat(maxLat)+parseFloat(minLat))/2;
                var zoom = getZoom(maxLng, minLng, maxLat, minLat);
                map.centerAndZoom(new BMap.Point(cenLng,cenLat), zoom);
              }else{
                //没有坐标，显示全中国
                map.centerAndZoom(new BMap.Point(103.388611,35.563611), 5);
            }
        };
         function getZoom (maxLng, minLng, maxLat, minLat) {
                var zoom = ["50","100","200","500","1000","2000","5000","10000","20000","25000","50000","100000","200000","500000","1000000","2000000"]//级别18到3。
                var pointA = new BMap.Point(maxLng,maxLat);  // 创建点坐标A
                var pointB = new BMap.Point(minLng,minLat);  // 创建点坐标B
                var distance = map.getDistance(pointA,pointB).toFixed(1);  //获取两点距离,保留小数点后两位
                for (var i = 0,zoomLen = zoom.length; i < zoomLen; i++) {
                    if(zoom[i] - distance > 0){
                        return 17-i+3;//之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
                    }
                };
            }
             //   设置地图初始位置
            setZoom(mapPoints)
            window.mytimer= setInterval(()=>{
                  that.zoom=map.getZoom()
            })
      },
  
  
    revindex(data){//遮盖物点击事件
        console.log(data)
        this.modelShow=!this.modelShow;
        this.modelNum=data;
    },
    uList(){//跳转附近的人
        this.$router.push({name:'commonList'})
    },
    msg(){//用户消息
        this.$router.push({name:'latestMsg'})
        },
  },
  activated(){
      console.log(this.mapdata)
  }
}
</script>

<style lang="less" scoped>
    @import "~less/base";
    .friendMapContainer{
        position: absolute;
        z-index:100;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        img{
            max-width: 100%;
            max-height: 100%;
        }
        //顶部
        .top{
            display: flex;
            height: 1rem;
            line-height: 1rem;
            background-color: @background-a;
            font-size: 14px;
            color: @color-t;
            .left{
                flex: 0 0 20%;
                text-align: center;
            }
            .mid{
                flex:  0 0 60%;
                text-align: center;
            }
        }
        .map{
           position: absolute;
           top: 1rem;
           bottom: 0;
           right: 0;
           left: 0;
        }
        .model{//弹出语音框
                position: absolute;
                width: 3.5rem;
                height:4rem;
                background-color:@model-color;
                top: 1.5rem;
                left: 50%;
                margin-left: -3.5/2rem;
                border-radius: 10px;
                .laba{//喇叭
                    position: absolute;
                    top: .25rem;
                    left: .25rem;
                }
                img{//用户头像
                    position: absolute;
                    width: 1.4rem;
                    border-radius: 50%;
                    top: .8rem;
                    left: 50%;
                    // margin-top: -.7rem;
                    margin-left: -.7rem;
                    border: .04rem solid @color-border4;
                }
                p{
                    text-align: center;
                    color: @color-c;
                    font-size: 16px;
                    margin-top: 2.4rem;
                }
        }
        .btn{//展开按钮
            position: absolute;
            top: 1.2rem;
            right: .1rem;
            background-color: @background-a;
            opacity: .5;
            width: .9rem;
            height: 1rem;
            text-align: center;
            line-height: 1rem;
            }
            .menu{//展开菜单
            position: absolute;
            top: 1.2rem;
            right: .1rem;
            /*opacity: .5;*/
            li{
                background-color:@background-a;
                width: .9rem;
                height: .9rem;
                text-align: center;
                line-height: .9rem;
            }
        }
    .btmSpeak{//下方对讲按钮
      height: 2.5rem;
      width: 100%;
      position: absolute;
      bottom: 0;
        ul{//3个功能按钮
            li{
            float: left;
            }
            >:nth-child(1),>:nth-child(3){
            width: 1rem;
            height: 1rem;
            position: absolute;
            top: 50%;
            margin-top: -.5rem;
            background-color: @color-btn1;
            border-radius: 50%;
            i{
                top: 50%;
                left: 50%;
                margin-top: -.2rem;
                margin-left: -.2rem;
            }
            }
            >:nth-child(1){
            left: 18%;
            }
            >:nth-child(3){
            right: 18%;
            }
            >:nth-child(2){
            width: 1.85rem;
            height: 1.85rem;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -1.85/2rem;
            margin-left: -1.85/2rem;
            background-color: @color-btnBack1;
            border-radius: 50%;
            border: .04rem solid @color-border5;
            i{
                top: 50%;
                left: 50%;
                margin-top: -.4rem;
                margin-left: -.4rem;
            }
            }
        }
        }
    }
</style>
